<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,intial-scale=1">
    <title>导航条</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
    <!--下拉菜单需要引入js-->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <style>
        body {
            padding-top: 70px;
            padding-bottom: 70px;
        }
    </style>
</head>
<body>
<div class="container">
    <h5>1.综合实例</h5>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--显示品牌文字-->
                <!--<a class="navbar-brand" href="#">Brand</a>-->
                <!--显示品牌Logo-->
                <a class="navbar-brand" href="#">
                    <img src="img/facebook.png" style="width: 75px" alt="Brand"/>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <br>
    <h5>2.品牌图标</h5>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="$" class="navbar-brand">
                    <img src="img/facebook.png" style="width: 75px" alt="Brand"/>
                </a>
            </div>
        </div>
    </nav>

    <br>
    <h5>3.表单(.navbar-form,.form-inline)</h5>
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <label class="sr-only">Search</label>
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

    <br>
    <h5 style="clear: both; margin-top: 10px">4.按钮(.navbar-btn)</h5>
    <button type="button" class="btn btn-default navbar-btn">Sign in</button>

    <br>
    <h5>5.文本(.navbar-text)</h5>
    <!--把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签。-->
    <p class="navbar-text">Signed in as Mark Otto</p>

    <br>
    <h5 style="clear: both; margin-top: 10px">6.非导航的链接(.navbar-link)</h5>
    <p class="navbar-text nvabar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

    <br>
    <h5 style="clear: both; margin-top: 10px">7.组件排列(.navbar-left,.navbar-right)</h5>
    <button type="button" class="btn btn-default navbar-btn navbar-right">Arrange</button>

    <br>
    <h5 style="clear: both; margin-top: 10px">8.固定在顶部(位于浏览器顶部.navbar-fixed-top)</h5>
    <!--
       1.这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。
       2.body { padding-top: 70px; }
    -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <form class="navbar-form navbar-left">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </form>

        </div>
    </nav>

    <br>
    <h5 style="clear: both; margin-top: 10px">9.固定在底部(位于浏览器底部.navbar-fixed-bottom)</h5>
    <!--
      1.这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。
      2.body { padding-bottom: 70px; }
   -->
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            <button type="button" class="btn btn-default navbar-btn">left</button>
            <button type="button" class="btn btn-default navbar-btn">middle</button>
            <button type="button" class="btn btn-default navbar-btn">right</button>
        </div>
    </nav>

    <br>
    <h5 style="clear: both; margin-top: 10px">10.静止在顶部(.navbar-static-top)</h5>
    <!--
       1.随着页面向下滚动而消失.
       2.与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding）
    -->
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <button type="button" class="btn btn-default navbar-btn">left</button>
            <button type="button" class="btn btn-default navbar-btn">middle</button>
            <button type="button" class="btn btn-default navbar-btn">right</button>
        </div>
    </nav>

    <br>
    <h5 style="clear: both; margin-top: 10px">11.反色的导航条(.navbar-inverse)</h5>
    <!--
       1.随着页面向下滚动而消失.
       2.与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding）
    -->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!--显示品牌文字-->
                <!--<a class="navbar-brand" href="#">Brand</a>-->
                <!--显示品牌Logo-->
                <a class="navbar-brand" href="#">
                    <img src="img/facebook.png" style="width: 75px" alt="Brand"/>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

</div>
</body>
</html>